<template>
  <div class="page" style="">
    <el-scrollbar>
      <div v-for="item in workers" :key="item.workerName" class="worker-item">
        <div class="">
          <div class="title">
            <!-- <el-tag
              :type="item.status == 'Stopped' ? 'danger' : 'success'"
              class="mx-1"
              size="small"
              effect="dark"
            >
              {{ item.status == "Stopped" ? "未运行" : "运行中" }}
            </el-tag> -->
            {{ item.workerName }}
          </div>
          <div class="des">{{ item.description }}</div>
        </div>
        <div class="action">
          <i
            v-if="item.status == 'Stopped'"
            @click="handleStartWorker(item.workerName)"
            class="iconfont icon-play-circle-fill"
          ></i>
          <i v-else class="iconfont icon-poweroff-circle-fill"></i>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import commonService from "@/api-services/apis/common";
import { ElMessage } from "element-plus";

const workers = ref<any[]>([]);
async function handleGetWorkers() {
  workers.value = await commonService.GetWorkers();
}
async function handleStartWorker(workerName: string) {
  workers.value = await commonService.StartWorker(workerName);
  ElMessage({
    message: "任务已开始执行",
    type: "success",
  });
}
handleGetWorkers();
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  width: 100%;
  color: #333;
  padding: 20px;
  box-sizing: border-box;

  ::v-deep(.el-scrollbar) {
    height: 100%;
    width: 100%;
  }

  .worker-item {
    background: rgb(255 255 255 / 50%);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    > div {
      flex: 1;
    }
    .des {
      color: #999;
      font-size: 0.8rem;
    }
    .action {
      flex: none;
      align-items: center;
      display: flex;
      .iconfont {
        font-size: 30px;
      }
    }
  }
}
</style>
